<template>
    <div class="user-list">
      <h2>用户列表</h2>
      <!-- 新增用户按钮 -->
      <el-button type="primary" @click="showAddDialog">新增用户</el-button>
      <el-table :data="users" style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增用户对话框 -->
      <el-dialog v-model="addDialogVisible" title="新增用户">
        <el-form :model="newUser" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="newUser.username" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="newUser.email" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addUser">确定</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 编辑用户对话框 -->
      <el-dialog v-model="editDialogVisible" title="编辑用户">
        <el-form :model="editUser" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="editUser.username" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="editUser.email" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateUser">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import axios from 'axios'
  import { ElMessage } from 'element-plus'
  
  const users = ref([])
  const loading = ref(false)
  const addDialogVisible = ref(false)
  const editDialogVisible = ref(false)
  const newUser = ref({ username: '', email: '' })
  const editUser = ref({ id: null, username: '', email: '' })
  
  const formatDate = (date) => {
    return new Date(date).toLocaleString()
  }
  
  const fetchUsers = async () => {
    loading.value = true
    try {
      const response = await axios.get('/api/User')
      if (response.data.success) {
        users.value = response.data.data
      } else {
        ElMessage.error(response.data.message)
      }
    } catch (error) {
      ElMessage.error('获取用户列表失败')
    } finally {
      loading.value = false
    }
  }

  // 显示新增对话框
  const showAddDialog = () => {
    newUser.value = { username: '', email: '' }
    addDialogVisible.value = true
  }

  // 新增用户
  const addUser = async () => {
    try {
      const response = await axios.post('/api/User', newUser.value)
      if (response.data.success) {
        ElMessage.success('新增用户成功')
        addDialogVisible.value = false
        await fetchUsers()
      } else {
        ElMessage.error(response.data.message)
      }
    } catch (error) {
      ElMessage.error('新增用户失败')
    }
  }

  // 显示编辑对话框
  const showEditDialog = (user) => {
    editUser.value = { ...user }
    editDialogVisible.value = true
  }

  // 编辑用户
  const updateUser = async () => {
    try {
      const response = await axios.put(`/api/User/${editUser.value.id}`, editUser.value)
      if (response.data.success) {
        ElMessage.success('编辑用户成功')
        editDialogVisible.value = false
        await fetchUsers()
      } else {
        ElMessage.error(response.data.message)
      }
    } catch (error) {
      ElMessage.error('编辑用户失败')
    }
  }

  // 删除用户
  const deleteUser = async (user) => {
    try {
      const response = await axios.delete(`/api/User/${user.id}`)
      if (response.data.success) {
        ElMessage.success('删除用户成功')
        await fetchUsers()
      } else {
        ElMessage.error(response.data.message)
      }
    } catch (error) {
      ElMessage.error('删除用户失败')
    }
  }
  
  onMounted(() => {
    fetchUsers()
  })
  </script>
  
  <style scoped>
  .user-list {
    padding: 20px;
  }
  </style>